<template>
	
	
	<view class="login-register">
		
		<!-- 登录表单 -->
		<view v-if="isLogin" class="form background border-radius padding">
			<u-form :model="loginForm" ref="uForm">
				<u-form-item label="账号">
					<u-input v-model="loginForm.username" placeholder="请输入账号"></u-input>
				</u-form-item>
				<u-form-item label="密码">
					<u-input v-model="loginForm.password" type="password" placeholder="请输入密码"></u-input>
				</u-form-item>
			</u-form>
			<u-button type="primary" class="margin-top" @click="handleLogin">登录</u-button>
			<view @click="switchForm" class="margin-top">
				<u--text color="balck"  size='20px' text="没有账号？去注册"></u--text>
			</view>
		</view>

		<!-- 注册表单 -->
		<view v-else class="form">
			<u-form :model="registerForm" ref="uForm">
				<u-form-item label="账号">
					<u-input v-model="registerForm.username" placeholder="请输入账号"></u-input>
				</u-form-item>
				<u-form-item label="密码">
					<u-input v-model="registerForm.password" type="password" placeholder="请输入密码"></u-input>
				</u-form-item>
				<u-form-item label="确认密码">
					<u-input v-model="registerForm.confirmPassword" type="password" placeholder="请确认密码"></u-input>
				</u-form-item>
			</u-form>
			<u-button type="primary" class="margin-top" @click="handleRegister">注册</u-button>
			<view @click="switchForm" class="margin-top">
				<u--text text="没有账号？去注册"></u--text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: true, // 控制显示登录还是注册
				loginForm: {
					username: '',
					password: ''
				},
				registerForm: {
					username: '',
					password: '',
					confirmPassword: ''
				}
			};
		},
		methods: {
			handleLogin() {
				var that = this;
				// 处理登录逻辑
				if (that.loginForm.username.length == 0 || that.loginForm.password.length == 0) {
					uni.showToast({ //弹框提示
						title: '登录账号或密码不能为空！',
						duration: 2000,
						icon:"error"
					})
				} else {
					uni.request({
						url: "http://localhost:8083/user/login",
						method: "POST",
						data: that.loginForm,
						header: {
							'Content-Type': 'application/json' // 以JSON格式发送数据
						},
						success: function(res) {
							if (res.data.code === 200) {
								console.log(res.data.data.userId)
								// 登录成功，存储用户信息
								uni.setStorageSync('userId',res.data.data.userId)
								// uni.setStorageSync('userInfo', res.data.data);
								uni.switchTab({
									url: "/pages/index/index"
								})
							} else if (res.data.code === 1002) {
								uni.showToast({ //弹框提示
									title: '用户名或密码错误，请重新登录',
									duration: 2000,
									icon:"error"
								})
							} else {
								console.log("请求成功，但code不是成功")
							}
						},
						fail: function(err) {
							console.log("请求错误", err)
						}


					})
				}
			},
			handleRegister() {
				// 处理注册逻辑
			},
			switchForm() {
				this.isLogin = !this.isLogin;
			}
		}
	};
</script>

<style lang="scss">
	
	.login-register {
		// background-image: url('../../../static/images/my/loginBackground3.jpg');
		// background: url('../../../static/images/my/loginBackground3.jpg') no-repeat;
		// background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	image {
	  width: 100vw;
	  height: 100vh;
	}

	.form {
		width: 80%;
		opacity: 0.9;
		z-index: 999;
	}
</style>